<!-- 简介管理列表编辑、新增 -->
<template>
  <el-card class="app-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="140px"
      label-suffix=":"
    >
    <el-form-item label="机构名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入机构名称" />
      </el-form-item>
      <el-form-item label="机构照片：" prop="photos">
        <picture-upload
          v-model="form.photos"
          :limit="9"
          type="photos"
          path="appliance"
          value="form.certification"
          :multiple="true"
          :file-list="photosfileList"
          @del-picture="delPicture_zp"
          @add-picture="addPicture_zp">
        </picture-upload>
      </el-form-item>
      <el-form-item label="机构证书：" prop="credential">
        <picture-upload
          v-model="form.credential"
          :limit="9"
          :multiple="true"
          type="credential"
          path="appliance"
          :value="form.credential"
          :file-list="credentialfileList"
          @del-picture="delPicture_zs"
          @add-picture="addPicture_zs"
          ></picture-upload>
      </el-form-item>
      <el-form-item label="机构资质：" prop="certification">
        <picture-upload
          v-model="form.certification"
          :limit="9"
          type="certification"
          path="appliance"
          :multiple="true"
          :value="form.certification"
          :file-list="certificationfileList"
          @del-picture="delPicture_zz"
          @add-picture="addPicture_zz"
        ></picture-upload>
      </el-form-item>
      <el-form-item label="机构简介" prop="description">
        <el-input
          type="textarea"
          :autosize="{ minRows:4 }"
          v-model="form.description"
          placeholder="请输入机构简介"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
export default {
  name: "synopsisEdit",
  components: {},
  data() {
    return {
      photosfileList: [],
      credentialfileList: [],
      certificationfileList: [],
      form: {
        name:null,
        photos:null,
        credential:null,
        certification:null,
        description:null,
      },
      rules: {
        name: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
        description: [{ required: true, message: "请输入机构简介", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 修改更新
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log('onSubmit:',this.form);
          this.API.updateRecoveryInstitution({ body: this.form })
            .then((res) => {
              console.log('res:',res)
              this.success("提交成功!");
              this.$router.go(-1);
            })
            .catch((err) => this.warning(err));
        } else {
          return false;
        }
      });
    },
    delPicture_zp(field,list) {
      this.form[field] = list;
    },
    addPicture_zp(res, field, fileList) {
      this.photosfileList.push(res);
    },

    addPicture_zs(res, field, fileList) {
      this.credentialfileList.push(res)
    },
    delPicture_zs(field,list) {
      this.form[field] = list;
    },

    addPicture_zz(res, field, fileList) {
      this.certificationfileList.push(res)
    },
    delPicture_zz(field,list) {
      this.form[field] = list;
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.API.getRecoveryInstituteById({id:this.$route.query.id}).then(ret=>{
        this.form = ret.data;
        console.log('edit:',ret.data);
      })
    }
  }
};
</script>
  <style scoped lang="scss">
.app-container {
  padding-top: 20px;
  padding-right: 50px;

  .el-input {
    width: 400px;
  }

  .el-select {
    width: 300px;
  }
}
</style>
  